<!--********************************************************************
* Copyright© 2000 - 2025 SuperMap Software Co.Ltd. All rights reserved.
*********************************************************************-->
<!--********************************************************************
* 该示例需要引入 
* tensorflow (https://github.com/tensorflow/tensorflow)
*********************************************************************-->
<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title data-i18n='resources.title_object_detection'></title>
  <style>
    #predict {
      position: absolute;
      left: 10px;
      top: 10px;
    }
  </style>
  
</head>
  <img style="display: none;" class="building" id="tileImg16" src="../img/plane600x600.png" alt="">
  <canvas id="data-canvas1" width="600" height="600"></canvas>
  <input type='button' id='predict' class='btn btn-primary' data-i18n="[value]resources.text_analyse"/>
  <script type="text/javascript" include="bootstrap,vue" src="../js/include-web.js"></script>
  <script include="tensorflow" src="../../dist/mapboxgl/include-mapboxgl.js"></script>
  <script>
  var modelUrl = 'https://iclient.supermap.io/web/data/machine_learning/object_detection/model.json';
  var img = document.querySelector('#tileImg16');
  var canvas = document.querySelector('#data-canvas1');
  var ctx = canvas.getContext('2d');
  var predictBtn = document.querySelector('#predict');
  ctx.drawImage(img, 0, 0, 600, 600);
  var webMachineLearning = new mapboxgl.supermap.WebMachineLearning();
  var objectDetection = new mapboxgl.supermap.ObjectDetection({ modelUrl, image: img });
  predictBtn.addEventListener('click', function() {
    webMachineLearning.execute(objectDetection).then((bboxList) => {
        bboxList.forEach(bbox => {
      drawBbox(ctx, bbox);
     });
   });
  });
  function drawBbox(ctx, bbox) {
      const {x, y, w, h} = bbox;
      ctx.strokeStyle = '#00FFFF';
      ctx.lineWidth = 3;
      ctx.strokeRect(x, y, w, h);
    }
   
  </script>
</body>

</html>
